<script setup>
import {ref, onMounted, computed} from 'vue'
  import { useRoute } from 'vue-router'
  import PageHeader from "@/components/PageHeader.vue"
  import {orderDetailApi} from "@/api/index.js";
  const route = useRoute()
  const orderInfo = ref({
    address: '',
    addressee_name: '',
    addressee_telphone: '',
    create_time: '', // 下单时间
    delivery: '', // 快递商
    order_sn: '',
    note: '',
    pay_amount: '',
    pay_time: '', // 支付时间
    goods_amount: '',
    transport_no: '', // 快递单号
    transport_time: '', // 发货时间
    status: '', // 订单状态
    shop_lists: []
  })
  const status = computed(() => {
    let label
    switch (orderInfo.value.status) {
      case -1:
        label = '已取消'
        break
      case 0:
        label = '未支付'
        break
      case 1:
        label = '已支付'
        break
      case 3:
        label = '待发货'
        break
      case 4:
        label = '已发货'
        break
      case 5:
        label = '已收货'
        break
      case 6:
        label = '已完成'
        break
      default:
        label = undefined
    }
    return label
  })
  const getOrderInfo = (order_id) => {
   orderDetailApi({order_id}).then(res => {
     console.log(res)
     orderInfo.value = res
   })
  }
  onMounted(() => {
    const { id } = route.query
    getOrderInfo(id)
  })
</script>

<template>
  <div class="order-detail">
    <PageHeader/>
    <div class="order-info">
      <div class="status">
        <a-tag :bordered="false" color="pink"> {{ status }} </a-tag>
      </div>
      <a-card>
        <div class="address-info">
          <div class="icon"><i class="fa-solid fa-location-dot"></i></div>
          <div class="info">
            <div class="address-name">
              {{ orderInfo.addressee_name }} {{ orderInfo.addressee_telphone}}
            </div>
            <div class="address-detail"> {{ orderInfo.address }} </div>
          </div>
        </div>
      </a-card>
      <a-card>
        <div class="cart-list">
          <div class="cart-shop" v-for="(item) in orderInfo.shop_lists" :key="item.id">
            <div class="shop-title">
              <img :src="item?.img" alt="" class="shop-img">
              <div class="shop-name"> {{ item.name }} </div>
            </div>
            <div class="good-list">
              <div class="goods-item" v-for="(goods) in item?.order_goods_lists" :key="goods.sku">
                <div class="box">
                  <img :src="goods?.thumb" alt="" class="goods-img"/>
                  <div class="goods-info">
                    <div class="goods-name"> {{ goods.goods_name }} </div>
                    <div class="goods-spec ellipsis"> 规格： {{ goods?.spece_value_title?goods?.spece_value_title:'默认规格' }} </div>
                    <div class="actions">
                    </div>
                  </div>
                </div>
                <div class="box mt">
                  <div class="goods-price">
                    <div class="new-price fh">  {{ goods.price }} </div>
                  </div>
                  <div class="num"> x{{ goods?.num }} </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-card>
      <a-card>
        <div class="order-time">
          <div class="t-item">
            <div class="label"> 订单编号 </div>
            <div class="value"> {{ orderInfo.order_sn }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 下单时间 </div>
            <div class="value"> {{ orderInfo.create_time }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 支付时间 </div>
            <div class="value"> {{ orderInfo.pay_time }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 发货时间 </div>
            <div class="value"> {{ orderInfo.transport_time }} </div>
          </div>
        </div>
      </a-card>
      <a-card>
        <div class="order-time">
          <div class="t-item">
            <div class="label"> 商品金额 </div>
            <div class="value fh"> {{ orderInfo.goods_amount }} </div>
          </div>
          <div class="t-item" v-if="orderInfo.delivery">
            <div class="label"> 配送方式 </div>
            <div class="value"> {{ orderInfo.delivery }} </div>
          </div>
          <div class="t-item" v-if="orderInfo.transport_no">
            <div class="label"> 物流单号 </div>
            <div class="value"> {{ orderInfo.transport_no }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 实付金额 </div>
            <div class="value fh"> {{ orderInfo.pay_amount }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 订单状态 </div>
            <div class="value"> {{ status }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 备注 </div>
            <div class="value"> {{ orderInfo.note }} </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-detail {
    padding: 40px 0 10px;
    .order-info {
      gap: 16px;
      display: flex;
      flex-direction: column;
      :deep(.ant-card .ant-card-body) {
        padding: 12px;
      }
      .address-info {
        gap: 10px;
        display: flex;
      }
      .cart-list {
        gap: 20px;
        display: flex;
        flex-direction: column;
        .cart-shop {
          .shop-title {
            gap: 10px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .shop-img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              object-fit: cover;
            }
            .shop-name {
              font-size: 18px;
              font-weight: bold;
            }
          }
          .good-list {
            gap: 10px;
            display: flex;
            flex-direction: column;
            .goods-item {
              gap: 20px;
              display: flex;
              align-items: start;
              padding-left: 10px;
              position: relative;
              .box {
                display: flex;
                align-items: start;
                gap: 20px;
              }
              .goods-img {
                width: 80px;
                height: 100px;
                border-radius: 10px;
              }
              .goods-info {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 5px;
                .ellipsis {
                  max-width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  //white-space: nowrap;
                  word-break: break-all;
                }
                .goods-name {
                  max-width: 100%;
                  font-size: 16px;
                  font-weight: bold;
                }
                .goods-spec, .shop-name {
                  color: #999;
                }
                .actions {
                  margin-top: 10px;
                  .anticon {
                    color: #999;
                    font-size: 20px;
                    cursor: pointer;
                    margin-right: 10px;
                    &:hover {
                      color: var(--primary);
                    }
                  }
                }
              }
              :deep(.ant-input-number) {
                width: 40px;
              }
              :deep(.ant-input-number-group-addon) {
                background-color: transparent;
                border: none;
                padding: 0;
              }
              :deep(.ant-input-number-input) {
                text-align: center !important;
              }
              .ant-btn {
                width: 32px;
                height: 32px;
                padding: 0;
                color: #999;
                border: none;
                border-radius: 10px;
                background-color: #f1f1f5;
                display: flex;
                align-items: center;
                justify-content: center;
                &:hover {
                  background-color: #e8e8f0;
                }
                .anticon {
                  color: #242424;
                  font-size: 16px;
                }
              }
              .goods-price {
                color: #999;
                font-size: 14px;
                font-weight: bold;
                display: flex;
                align-items: center;
                gap: 10px;
                .new-price, .old-price {
                  white-space: nowrap;
                }
                .new-price {
                  color: #f44;
                  font-size: 18px;
                }
                .old-price {
                  text-decoration: line-through;
                }
              }
            }

            @media (max-width: 750px) {
              .goods-item {
                display: block;
              }
              .mt {
                margin-top: 20px;
                justify-content: space-between;
              }
              .goods-name, .ellipsis {
                max-width: 100%;
              }
            }
          }
        }
      }
      .order-time {
        .t-item {
          gap: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .label {
            line-height: 40px;
            white-space: nowrap;
          }
          .value {
            word-break: break-all;
          }
          .fh {
            color: #f40;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>